import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'viewmodel/user_view_model.dart';
import 'viewmodel/counter_view_model.dart';
import 'viewmodel/initialize_providers.dart';

///共享状态管理Provider 的使用
///1.创建自己需要共享的数据
///2.在应用程序的顶层ChangeNotifierProvider
///3.在其他位置使用共享的数据
/// > Provider.of: 当Provider中的数据发生改变时，Provider.of所在的Widget整个build方法都会重新构建
/// > Consumer(相对推荐):当Provider中的数据发生改变时，重新执行Consumer的builder
/// > Selector: 1.selector方法(作用: 对原有的数据进行转换) 3.shouldRebuild(作用,要不要重新构建)
main() {
  //2.在应用程序的顶层ChangeNotifierProvider
  // runApp(ChangeNotifierProvider(
  //     child: ChangeNotifierProvider(
  //       child: MyApp(),
  //       create: (ctx) => HYUserViewModel(UserInfo('zs', 2, 'imgUrl')),
  //     ),
  //     create: (ctx) => HYCounterViewModel()));

  runApp(MultiProvider(providers: providers, child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primaryColor: Colors.teal, cardColor: Colors.orange),
        debugShowCheckedModeBanner: false,
        home: HYHomePage());
  }
}

class HYHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Provider的使用'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              HYShowData01(),
              HYShowData02(),
              HYShowData03(),
              HYShowData04()
            ],
          ),
        ),
        backgroundColor: Colors.white,
        floatingActionButton: Selector<HYCounterViewModel, HYCounterViewModel>(
            selector: (ctx, model) => model,
            shouldRebuild: (pre, next) => false,
            builder: (ctx, model, child) {
              print('floatingActionButton builder');
              return FloatingActionButton(
                  child: child,
                  backgroundColor: Colors.teal,
                  onPressed: () {
                    model.counter++;
                  });
            },
            child: Icon(Icons.add)),
        // Consumer<HYCounterViewModel>(
        //     builder: (ctx, model, child) {
        //       print('floatingActionButton builder');
        //       return FloatingActionButton(
        //           child: child,
        //           backgroundColor: Colors.teal,
        //           onPressed: () {
        //             model.counter++;
        //           });
        //     },
        //     child: Icon(Icons.add)),
        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat);
  }
}

class HYShowData01 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 3.在其他位置使用共享的数据
    int counter = Provider.of<HYCounterViewModel>(context).counter;
    print('HYShowData01 build');
    return Container(
        color: Colors.blue,
        child: Text('当前计数:$counter',
            style: TextStyle(fontSize: 30, color: Colors.white)));
  }
}

class HYShowData02 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('HYShowData02 build');
    return Container(
        color: Colors.teal,
        child: Consumer<HYCounterViewModel>(builder: (ctx, model, child) {
          print('HYShowData02 Consumer');
          return Text('当前计数:${model.counter}',
              style: TextStyle(fontSize: 30, color: Colors.white));
        }));
  }
}

class HYShowData03 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Provider.of Consumer Selector
    print('HYShowData03 build');
    return Container(
        color: Colors.pink,
        child: Consumer<HYUserViewModel>(builder: (ctx, model, child) {
          print('HYShowData03 consumer');
          return Text('用户名:${model.user.nickname}',
              style: TextStyle(fontSize: 30, color: Colors.white));
        }));
  }
}

class HYShowData04 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Provider.of Consumer Selector Consumer2
    print('HYShowData03 build');
    return Container(
        color: Colors.orange,
        child: Consumer2<HYUserViewModel, HYCounterViewModel>(
            builder: (ctx, userModel, counterModel, child) {
          print('HYShowData04 consumer');
          return Text(
              '用户名:${userModel.user.nickname},计数:${counterModel.counter}',
              style: TextStyle(fontSize: 30, color: Colors.white));
        }));
  }
}
